﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>js轮播</title>
    <script src="js/carousel.js"></script>
    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div id="banner">
    <div id="banner_list">
        <img src="images/bannerimg3_02.png"/>
        <img src="images/bannerimg1_02.png"/>
        <img src="images/bannerimg2_02.png"/>
        <img src="images/bannerimg3_02.png"/>
        <img src="images/bannerimg1_02.png"/>
    </div>
    <div id="banner_btn">
        <span class="on"></span>
        <span></span>
        <span></span>
    </div>
    <a href="javascript:;" id="prev"></a>
    <a href="javascript:;" id="next"></a>
</div>
<script>
    window.onload = function () {
        var list = document.getElementById('banner_list');
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var _width = document.body.clientWidth;
        var i = list.getElementsByTagName("img").length - 2;
        var num=0;
        var interval=3000;
        var timer;
        var span=document.getElementById('banner_btn').getElementsByTagName('span');
        document.getElementById('banner').style.width = _width + 'px';

        list.style.left = '-' + _width + 'px';
        function animate(e) {
            var newleft = parseInt(list.style.left) + e;
            list.style.left = newleft + 'px';
            if (parseInt(newleft) > '-' + _width) {
                list.style.left = '-' + _width * i + 'px';

            }
            if (parseInt(newleft) < '-' + _width * i) {
                list.style.left = '-' + _width + 'px';
            }
        }
        function num1() {
            for(var x=0;x<span.length;x++){
                if(span[x].className=='on'){
                    span[x].className='';
                }
                span[num].className='on';
            }
        }
        prev.onclick = function () {
            animate(_width);
           if(num==0){
               num=parseInt(i-1);
           }
           else{
               num--;
           }
            num1();
        }
        next.onclick = function () {
            animate(parseInt('-' + _width));
            if(num==parseInt(i-1)){
                num=0;
            }
            else{
                num++;
            }
            num1();
        }
        for(var n=0;n<span.length;n++){
            span[n].id=n;
            span[n].onclick=function () {
                if(this.className=='on') return;
                var index=this.id;
                var offset=_width*(index-num);
                animate(offset);
                num=index;
                num1();
            }
        }
        function play() {
            timer=setInterval(function () {
                next.onclick();
            },interval)

        }
        function stop() {
            clearInterval(timer);
        }
        document.getElementById('banner').onmouseover = stop;
        document.getElementById('banner').onmouseout = play;
        play();
    }
</script>
</body>
</html>
